<?php
$this->title = '注册新会员';
?>

<link href="<?= \yii\helpers\Url::to('@web/base/css/bootstrap.min.css') ?>" rel="stylesheet">
<link href="<?= \yii\helpers\Url::to('@web/base/css/css-loader.css?t=' . time()) ?>" rel="stylesheet">
<link href="<?= \yii\helpers\Url::to('@web/momo/css/bootstrap-datepicker.min.css') ?>" rel="stylesheet">

<style>
	.container{
		margin:0;padding:0;
	}
</style>
<div class="broad" style="max-width:800px;margin: 0 auto;">
	<div  id="limgDiv" class="formInfo"><img style="" class="lcardImg" src="https://imgsrv1.mailer08.net/images/dGVuYW50MjAyZGV2ZWxvcGVy/WTJGdGNHRnBaMjVmTVRNPQ/momo_signup.png" alt="" width="579" height="150"></div>
	<div class="middlecontent" style="max-width:800px;margin: 0 auto;">
		<div class="content1">
			<div class="formmain">
			<?php $form = \yii\widgets\ActiveForm::begin(['action' => [''], 'method' => 'post', 'id' => 'customer-form', 'class' => 'survey_form']) ?>

				<?= $form->field($model, 'last_name')->textInput(['maxlength' => true, 'placeholder' => '请输入用户名'])->label("用户名 <span style='color: red;'>*</span>") ?>
				
				<?= $form->field($model, 'mobile')->textInput(['maxlength' => true, 'placeholder' => '请输入手机号'])->label("手机号 <span style='color: red;'>*</span>") ?>
				
				<?= $form->field($model, 'gender')->dropDownList(['男' => '男', '女' => '女']) ?>
				
				<?= $form->field($model, 'email')->textInput(['placeholder' => '请输入邮箱']) ?>
				
				<!-- <?= $form->field($model, 'birthday')->textInput(['type' => 'date']) ?> -->
				<div class="form-group field-customer-birthday">
					<label class="control-label" for="customer-birthday">生日</label>
					<input type="text" id="customer-birthday" class="form-control datepicker" name="Customer[birthday]">
					<div class="help-block"></div>
				</div>
				
				<input type="hidden" id="openid" name="openid" value="<?= $openid ?>">
				
				<div class="form-group">
					<?= \yii\helpers\Html::submitButton('注  册', ['id' => 'submit-form', 'class' => 'btn btn-success']) ?>
				</div>

			<?php \yii\widgets\ActiveForm::end() ?>
			</div>
		</div>
	</div>
</div>

<!-- loading -->
<div class="lds-modal" style="display:none;">
<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>

<iframe id='userMsg' name='userMsg' src="https://webform.xgate.com/app/index.php/webforms/form/form?encid=ac854846-fcad-55e8-cb49-7f0b5fd393f5&tracker=350e92b9-5986-4f05-f72c-77289fac5343" frameborder="0" width=0 height=0></iframe>

<script>
var customerSaveUrl = "<?= \yii\helpers\Url::to(['member/customer-save']); ?>";
var memberIndexUrl = "<?= \yii\helpers\Url::to(['wechat/oauth/member_index', 'appid' => $appid, 'openid' => $openid]); ?>";
</script>
<?php
$js = '
$(".datepicker").datepicker({
	format: "yyyy-mm-dd",
	language: "zh-CN",
	autoclose: true,
	// todayHighlight: true
});

$("#submit-form").click(function(e){
	var form_error = $(".help-block").text();
	if(form_error.length > 0){
		return false;
	}
	var last_name = $("#customer-last_name").val();
	var mobile = $("#customer-mobile").val();
	
	if(mobile.length < 0 || mobile.length == 0){
		return;
	}
	if(mobile.length < 11 || mobile.length > 11){
		return;
	}

	// console.log(mobile.length);
	var gender = $("#customer-gender").val();
	var email = $("#customer-email").val();
	var openid = $("#openid").val();
	var birthday = $("#customer-birthday").val();
	var y = birthday.substr(0, 4);
   	var m = birthday.substr(5, 2);
   	var d = birthday.substr(8, 2);
	var data = {
		last_name: last_name,
		mobile: 86+mobile,
		gender: gender,
		email: email,
		openid: openid,
		birth_yyyy: y,
		birth_mm: m,
		birth_dd: d,
	};

	$(".lds-modal").css("display", "block");

	$.post(customerSaveUrl, data, function (re) {
		if (re.type == "new") {
			window.frames.userMsg.postMessage(data, "*")
		} else if(re.type == "old"){
			$(".lds-modal").css("display", "none");
			window.location.href = memberIndexUrl;
		} else if (re.type == "error"){
			var mobileError = $("#customer-mobile").next();
			mobileError.text("手机号已存在");
			mobileError.css("color","#A94442");
			$("#customer-mobile").prev().css("color","#A94442");
			$("#customer-mobile").css("border-color","#A94442");
			$(".lds-modal").css("display", "none");
		}
	}, "json");
	return false;
})

window.addEventListener("message", function (e) {
	if (e.data == "isAppointmentSuccess") {
		setTimeout(function(){
			$(".lds-modal").css("display", "none");
			// window.location.reload();
			window.location.href = memberIndexUrl
		}, 6000);
	}
})

';
$this->registerJs($js);
$this->registerJsFile(\yii\helpers\Url::to('@web/momo/js/bootstrap-datepicker.min.js'), ['depends' => [\app\assets\MomoAsset::className()]]);
$this->registerJsFile(\yii\helpers\Url::to('@web/momo/js/bootstrap-datepicker.zh-CN.min.js'), ['depends' => [\app\assets\MomoAsset::className()]]);
?>